<template>
	<view class="page" :style="{'--color': color}" v-if="myInfo">
		<status-bar title="团队管理"></status-bar>
		<view class="Info">
			<view class="userBox">
				<image :src="$imgUrls(myInfo.headimg)" mode="aspectFill" class="userImg"></image>
				<view class="Lvs">{{ myInfo.upLevelInfo.thisLevelTitle }}</view>
			</view>
			<view class="flex-1 white">
				<view class="size30">{{ myInfo.name }}</view>
				<view class="size30 m-top10">{{ myInfo.tel }}</view>
			</view>
		</view>

		<view class="LvBox">
			<text class="size30 color_33">团队等级</text>
			<view class="LvWrapper">
				<text class="size28">{{ myInfo.upLevelInfo.thisLevelTitle }}</text>
				<view class="content">
					<text class="Txt">{{ myInfo.upLevelInfo.text }}</text>
					<view class="line">
						<u-line-progress :percentage="myInfo.upLevelInfo.proportion" height="9"
							activeColor="#ffcc00"></u-line-progress>
					</view>
				</view>
				<text class="size32 color_33">{{ myInfo.upLevelInfo.nextLevelTitle }}</text>
			</view>
		</view>

		<view class="Income">
			<view @click="toUrl('/moneyPage/capital/brokerage_list')">
				<view class="color_33 size28">我的收益（元）</view>
				<view class="color_33 size50 m-top20">{{ myInfo.income }}</view>
			</view>
			<view class="d-flex a-center" @click="toUrl('/moneyPage/capital/withdraws')">
				<text class="color size26">去提现</text>
				<view class="iconfont icon-a-zujian32 h7 color p-left4"></view>
			</view>
		</view>

		<view class="BoxItem ">
			<view class="list" @click="toUrl('/Releases/groupPer')">
				<view class="title">团队业绩（元）</view>
				<view class="Num">{{ myInfo.teamInfo.teamOrderMoney }}</view>
			</view>
			<view class="list" @click="toUrl('/Releases/groupMem')">
				<view class="title">团队成员（位）</view>
				<view class="Num">{{ myInfo.teamInfo.teamUserNum }}</view>
			</view>
		</view>


		<view class="BoxItem  m-top20" v-if="myInfo.inviteInfo && myInfo.inviteInfo.orderId > 0">
			<view class="list" @click="toUrl(`formList?orderId=${myInfo.inviteInfo.orderId}`)">
				<view class="title">{{myInfo.inviteInfo.title}}</view>
				<view class="black size28">待审核 {{ myInfo.inviteInfo.waitNum}}</view>
			</view>
			<image :src="$imgUrls(myInfo.inviteInfo.orderImg)" mode="widthFix" class="orderImg"
				@click="toUrl(myInfo.inviteInfo.orderPath)"></image>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import Api from '@/common/Api.js'
	export default {
		data() {
			return {
				myInfo: ''
			}
		},
		computed: {
			...mapState(['color'])
		},
		onLoad() {
			this.getConfig()
		},
		methods: {
			async getConfig() {
				const result = await Api.getConfig()
				this.myInfo = result
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f2f2f2;
	}

	.Info {
		background-color: var(--color);
		padding: 40rpx 24rpx;
		display: flex;
		align-items: center;

		.userBox {
			width: 150rpx;
			height: 120rpx;
			display: flex;
			justify-content: center;
			position: relative;

			.userImg {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}

			.Lvs {
				max-width: 100%;
				background-color: #ff9900;
				color: #fff;
				font-size: 22rpx;
				padding: 2rpx 10rpx;
				border-radius: 4rpx;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				white-space: nowrap;
			}
		}
	}

	.LvBox {
		width: 690rpx;
		padding: 20rpx;
		background-color: #fff;
		margin: 24rpx auto 0;
		border-radius: 10rpx;

		.LvWrapper {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.content {
				flex: 1;
				margin: 0 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.Txt {
					color: #b7655a;
					font-size: 26rpx;
				}

				.line {
					width: 100%;
					margin-top: 10rpx;
				}
			}
		}
	}

	.Income {
		width: 690rpx;
		background-color: #fff;
		padding: 30rpx 24rpx;
		border-radius: 10rpx;
		margin: 24rpx auto 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.BoxItem {
		width: 690rpx;
		margin: auto;
		display: flex;
		flex-direction: column;


		.list {
			width: 100%;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 30rpx;
			margin-top: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				color: #333;
				font-size: 28rpx;
			}

			.Num {
				color: #333;
				font-size: 50rpx;

			}

			.count {
				display: inline-block;
				width: 50%;
				margin-top: 10rpx;
				font-size: 28rpx;
			}

			.toTitle {
				text-align: center;
				line-height: 200rpx;
				font-size: 36rpx;
			}
		}

		.orderImg {
			width: 100%;
			border-radius: 0 0 10rpx 10rpx;
		}
	}
</style>